<template>
  <LoadPage :show="showPage"/>
  <view class="main">
    <view class="content">
      <view class="order-list" :style="{marginTop: cateHeight + 'px'}">
        <view class="order-item" >
          <view class="user dispaly-just-between">
            <view class="info dispaly-center">
              <view class="avatar ">
                <image
                    :src="productDetailData?.avatar"
                    mode="aspectFill"/>
                <image class="q" src="/static/icon/q.png" mode="aspectFill"/>
              </view>
              <view class="name">{{productDetailData?.nickName}}</view>
            </view>
            <view class="user-id">ID{{productDetailData?.id}}</view>
          </view>
          <view class="name">{{productDetailData?.name}}</view>
          <view class="desc">{{productDetailData?.intro}}</view>
          <view class="x-line">
            <image src="/static/icon/x-line.png" mode="aspectFill"/>
          </view>
          <view class="item-box">
            <view class="item dispaly-center">
              <view class="item-left">
                <image src="/static/icon/block.png" mode="aspectFill"/>
                <view class="txt dispaly-align-center">时间范围</view>
              </view>
              <view class="item-right">{{productDetailData?.startTime}} 至 {{productDetailData?.endTime}}</view>
            </view>
            <view class="item dispaly-center">
              <view class="item-left">
                <image src="/static/icon/block.png" mode="aspectFill"/>
                <view class="txt dispaly-align-center">可得报酬</view>
              </view>
              <view class="item-right">{{Number(productDetailData?.price).toFixed(2)}}</view>
            </view>
            <view class="item dispaly-center">
              <view class="item-left">
                <image src="/static/icon/block.png" mode="aspectFill"/>
                <view class="txt dispaly-align-center">接单手续</view>
              </view>
              <view class="item-right">{{productDetailData?.serviceFee || '0.00'}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-box" v-if="productDetailData?.createUser != userInfo.userId">
    <view class="item-box dispaly-just-between">
      <view class="item" >
        <view class="b-txt dispaly-align-center" @click="takeConfirm">接单</view>
        <image src="/static/icon/jd-btn.png" mode="aspectFill"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import {productDetail, takeOrder} from '@/api/apiList';

const userInfo = uni.getStorageSync("userInfo")
const productId = ref('')
onLoad((option) => {
  productId.value = option.id ? option.id : ''
  getDetail()
})

// 获取商品详情
const productDetailData = ref({})
const showPage = ref(true)
const getDetail = async () => {
  const res = await productDetail(productId.value)
  if(res.code == 200) {
    productDetailData.value = res.data
    showPage.value = false
  }
}

const takeConfirm = async () => {
  if(new Date() > new Date(productDetailData.value.endTime)) {
    await uni.showToast({
      title: '接单时间已过',
      icon: 'none'
    })
  }else {
    await uni.showLoading({
      title: '接单中'
    })
    const res = await takeOrder({id: productDetailData?.value.id})
    if(res.code == 200) {
      uni.hideLoading()
      await uni.showToast({
        title: '接单成功',
        icon: 'none'
      })
      setTimeout(() => {
        uni.reLaunch({
          url: `/subPackage/mine/orderTaking`
        })
      }, 1500)
    }
  }


}

</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;



.order-list {
  padding: 22rpx;

  .order-item:last-child {
    margin-bottom: 0;
  }

  .order-item {
    margin-bottom: 28rpx;
    border: 6rpx solid #4e3b0c;
    padding: 24rpx;
    background-color: #ffd257;

    .name {
      font-family: IPix;
      font-size: 28rpx;
      color: #000000;
      margin: 30rpx 0 15rpx 0;
    }

    .user {
      .info {
        .avatar {
          margin-right: 20rpx;
          border: 1rpx solid #FFFFFF;
          border-radius: 50%;
          width: 74rpx;
          height: 74rpx;
          position: relative;

          .q {
            width: 74rpx;
            height: 74rpx;
          }

          image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 74rpx;
            height: 74rpx;
            border-radius: 50%;
          }
        }

        .name {
          font-family: IPix;
          font-size: 22rpx;
          color: #000000;
        }
      }

      .user-id {
        font-family: IPix;
        font-size: 22rpx;
        color: #000000;
      }
    }

    .x-line {
      image {
        width: 626rpx;
        height: 5rpx;
      }
    }
    .item-box {
      margin-top: 28rpx;
      .item:last-child {
        margin-bottom: 0;
      }
      .item {
        margin-bottom: 28rpx;
        .item-right {
          font-family: IPix;
          font-size: 20rpx;
          color: #000000;
          font-weight: 900;
        }
        .item-left {
          margin-right: 15rpx;
          width: 152rpx;
          height: 60rpx;
          position: relative;
          image {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            width: 152rpx;
            height: 60rpx;
          }
          .txt {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            width: 152rpx;
            height: 60rpx;
            font-family: IPix;
            font-size: 26rpx;
            color: #000000;
            font-weight: 900;
          }
        }
      }
    }

    .desc {
      margin: 18rpx 0 10rpx 0;
      font-family: IPix;
      font-size: 24rpx;
      color: #000000;
      line-height: 36rpx;
    }
  }
}

.btn-box {
  border: 6rpx solid #4e3b0c;
  border-bottom: none;
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;
  box-sizing: border-box;
  .item-box {
    padding: 18rpx 26rpx 0 26rpx;
    .item {
      position: relative;
      width: 692rpx;
      height: 82rpx;
      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 692rpx;
        height: 82rpx;
      }
      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #FFD257;
        width: 692rpx;
        height: 82rpx;
      }
    }
  }
}
</style>